<template>
  <el-dialog
    :title="dialogData.dialogTitle + '货品类型'"
    :visible.sync="dialogData.addVisible"
    class="dialogForm"
    width="30%"
    :before-close="handleClose"
  >
    <div class="unfreeze-form">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-form-item
          label="货品类型编码"
          prop="code"
        >
          <el-input
            v-model="formData.code"
            autocomplete="off"
            disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="货品类型名称"
          prop="name"
        >
          <el-input
            v-model="formData.name"
            autocomplete="off"
            maxlength="10"
            placeholder="请输入货品类型名称"
          />
        </el-form-item>
      </el-form>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <base-button
        class="unimportanceButton btnCancle"
        @click="handleClose"
      >取 消</base-button>
      <base-button
        class="minorImportantButton"
        type="primary"
        @click="handleSubmit"
      >确 定</base-button>
    </span>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { ElForm } from 'element-ui/types/form'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// interface接口
import { ICommonReturn } from '@/utils/common-interface'
// api接口
import { generateWarehouseCode } from '@/api/common-api'
import { addGoodsType, updateGoodsType } from '@/module-base/api/goods'

@Component({
  name: 'Dialog',
  components: {
    BaseButton
  }
})
export default class extends Vue {
  @Prop() private dialogData!: any
  @Prop() private formData!: any

  // 校验表单
  private rules = {
    code: [{ required: true, message: '请输入货品类型编码', trigger: 'blur' }],
    name: [{ required: true, message: '请输入货品类型名称', trigger: 'blur' }]
  }

  mounted() {
    this.initData()
  }

  // 获取编码
  private async initData() {
    if (this.dialogData.id === '') {
      // 新增操作
      const { data } = await generateWarehouseCode('HPLX')
      this.formData.code = data
    }
  }

  // 提交数据
  private handleSubmit() {
    (this.$refs.ruleForm as ElForm).validate(async(valid: boolean) => {
      if (valid) {
        const params = {
          ...this.formData
        }
        let data: ICommonReturn
        if (this.dialogData.id === '') {
          // 新增操作
          data = ((await addGoodsType(params)) as unknown) as ICommonReturn
        } else {
          // 编辑
          data = ((await updateGoodsType(params)) as unknown) as ICommonReturn
        }
        (this.$refs as any).ruleForm.resetFields()
        if (data.code === 0) {
          this.$message({
            showClose: true,
            message: '恭喜你，提交成功！',
            type: 'success'
          })
          this.handleClose()
        } else {
          this.$message({
            showClose: true,
            message: data.msg,
            type: 'error'
          })
        }
      } else {
        return false
      }
    })
  }

  // 表单取消
  private handleClose() {
    this.$emit('handleclose')
  }
}
</script>
<style lang="scss">
</style>
